<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 仪表盘
 * @LastEditTime: 2021-11-09 17:33:21
 * @FilePath: \tianjushi-kanban\src\components\charts\Gauge3.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import { onMounted, toRefs, ref, reactive, watch, computed } from "vue";
import { resetChartStyle, showLoading } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    total: {
      type: Number,
      default: 100,
    },
    value: {
      type: Number,
      default: 50,
    },
	 fontSize: {
      type: Number,
      default:18,
    }, 
    color: {
      type: Array,
      default: ["#0ba360", "yellow", "red"],
    },
	pointercolor:{
		type: Array,
      default: ["#00c6fb", "#005bea"],	
	}
  },
  setup: function (props, context) {
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(state.chartInit);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });

    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
      const option = {
        graphic: {
          type: "text",
          left: "center",
          top: "80%",
          style: {
            text: props.title,
            textAlign: "center",
            fill: "#fff",
            fontSize: props.fontSize,
          },
        },
        series: [
          // 仪表盘
          {
            type: "gauge",
            min: 0,
            max: props.total,
            splitNumber: 5,
            radius: "70%",
            center: ["50%", "50%"], 
            // 仪表盘轴线相关配置
            axisLine: {
              // 仪表盘轴线样式
              lineStyle: {
                width: 18,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: props.color[0],
                      },
                      {
                        offset: 0.5,
                        color:  props.color[1],
                      },
                      {
                        offset: 1,
                        color: props.color[2],
                      },
                    ]),
                  ],
                ],
              },
              // 是否在两端显示成圆形
              roundCap: true,
            },
            // 刻度样式
            axisTick: {
              show: true,
              lineStyle: {
                color: props.pointercolor[0],
                width: 2,
              },
              distance: 0,
            },
            // 分隔线样式
            splitLine: {
              show: true,
              lineStyle: {
                color: props.pointercolor[0],
                width: 2,
              },
              distance: 2,
            },
            //   刻度标签
            axisLabel: {
              distance: 25,
              color: props.pointercolor[0],
              fontSize: 16,
            },
            //   指针
            pointer: {
              length: "60%",
              width: 10,
              itemStyle: {
                shadowColor: props.pointercolor[0],
                shadowOffsetY: "2",
                shadowBlur: 10,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: props.pointercolor[0],
                  },
                  {
                    offset: 1,
                    color: props.pointercolor[1],
                  },
                ]),
              },
            },
            // 仪表盘详情
            detail: {
              // 是否开启标签的数字动画
              valueAnimation: true,
              fontSize: props.fontSize+10,
              offsetCenter: [0, "70%"],
              color: "#1F9EFF",
              formatter: function (value) {
                return value.toFixed(1) + "%";
              },
            },
            data: [
              {
                value: props.value,
              },
            ],
          },
          // 外圆线
          {
            type: "pie",
            radius: ["74%", "76%"],
            center: ["50%", "50%"],
            hoverAnimation: false, //鼠标移入变大
            startAngle: 225,
            labelLine: {
              show: false,
            },
            label: {
              position: "center",
            },
            data: [
              {
                value: 75,
                itemStyle: {
                  //color: '#1F9EFF',
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color:  props.color[0],
                    },
                    {
                      offset: 0.5,
                      color:  props.color[1],
                    },
                    {
                      offset: 1,
                      color:  props.color[2]
					}
                  ]),
                  borderWidth: 0,
                },
              },
              {
                value: 25,
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                },
              },
            ],
          },
        ],
      };

      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      state.chartInit = echarts.init(state.echartref);
      state.chartInit.showLoading(showLoading());
      f_echartInit(state.chartInit);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>